// 模块配置页面JavaScript
// 模块配置表单处理
document.addEventListener('DOMContentLoaded', function() {
    // 获取表单和表单元素
    const form = document.getElementById('module-config-form');
    const moduleType = document.getElementById('module-type');
    const buttonTextGroup = document.getElementById('button-text-group');
    const inputPlaceholderGroup = document.getElementById('input-placeholder-group');
    const connectionStatus = document.getElementById('connection-status');
    
    // 初始化连接状态
    updateConnectionStatus();
    
    // 根据模块类型显示/隐藏相关字段
    moduleType.addEventListener('change', function() {
        const type = this.value;
        
        // 重置所有可选字段
        buttonTextGroup.style.display = 'none';
        inputPlaceholderGroup.style.display = 'none';
        
        // 根据类型显示对应字段
        if (type === 'button') {
            buttonTextGroup.style.display = 'block';
        } else if (type === 'input') {
            inputPlaceholderGroup.style.display = 'block';
        }
    });
    
    // 更新连接状态函数
    function updateConnectionStatus() {
        const mqttConfig = localStorage.getItem('mqttConfig');
        if (mqttConfig) {
            connectionStatus.textContent = '已连接';
            connectionStatus.style.color = '#4CAF50';
        } else {
            connectionStatus.textContent = '未连接';
            connectionStatus.style.color = '#f44336';
        }
    }
    
    // 表单提交处理
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 验证必填字段
        if (!document.getElementById('module-title').value) {
            alert('请填写模块标题');
            return;
        }
        
        // 收集表单数据
        const config = {
            title: document.getElementById('module-title').value,
            type: moduleType.value,
            image: document.getElementById('module-image').files[0] ? 
                  document.getElementById('module-image').files[0].name : null,
            timestamp: new Date().getTime()
        };
        
        // 根据类型添加额外数据
        if (config.type === 'button') {
            config.buttonText = document.getElementById('button-text').value || '按钮';
        } else if (config.type === 'input') {
            config.placeholder = document.getElementById('input-placeholder').value || '请输入内容';
        }
        
        // 保存到localStorage
        localStorage.setItem('moduleConfig', JSON.stringify(config));
        
        // 提示保存成功
        alert('模块配置已保存！');
        
        // 返回上一页
        window.history.back();
    });
});

// 保存模块配置
function saveModule(module) {
    console.log('保存模块配置');
    
    // 从本地存储获取现有模块
    const modules = JSON.parse(localStorage.getItem('modules')) || [];
    
    // 添加新模块
    modules.push(module);
    
    // 保存回本地存储
    localStorage.setItem('modules', JSON.stringify(modules));
}